<template>
  <view>
    <view class="swiper-wrapper" v-if="list.length">
      <view class="point point-li">
        <view
            :class="['li', { active: current == index }]"
            v-for="(item, index) in list"
            :key="index"
        >
          <text :class="{ active1: current === index }"></text>
        </view>
      </view>
      <swiper
          class="swiper"
          @change="onChange"
          :current="current"
          :circular="swipetData.circular"
          :indicator-dots="swipetData.indicatorDots"
          :autoplay="swipetData.autoplay"
          :interval="swipetData.interval"
          :duration="swipetData.duration"
      >
        <swiper-item @click="onBanner(item,index)" v-for="(item, index) in list" :key="index">
          <view class="desc" v-if="isShow">
            <text>{{ item.title }}</text>
          </view>
          <image class="images-11" :src="item.imgurl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

    </view>
    <u-empty :text="`暂无${title}列表`" mode="list"  v-else></u-empty>
  </view>
</template>

<script>
  export default {
    name: 'ChangeSwiperCurrent',
    props: {
      //必要数据
      list: {
        type: Array,
        default() {
          return []
        },
      },
      //展示数据
      isShow: {
        type: Boolean,
        default: () => true,
      },
      swipetData: {
        type: Object,
        default() {
          return {
            circular: true, //是否采用衔接滑动，即播放到末尾后重新回到开头
            autoplay: true, //是否要自动
            interval: 5000, //定时时间
            duration: 500, //过渡时间
            indicatorDots: false, //是否显示面板指示点
          }
        },
      },
      //为空时触发
      title:{
        type:String,
        default(){
          return '活动集市'
        }
      },
    },
    data() {
      return {
        current: 0, //第几个
      }
    },
    methods: {
      //事件操作
      onBanner(item,index) {
        this.$emit('click', item,index)
      },
      //修改时
      onChange(e) {
        this.current = e.detail.current
        this.$emit('change', e, e.detail.current)
      },
    },
  }
</script>

<style scoped lang="scss">
  .swiper-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 30rpx;
    border-radius: 10rpx;
    .point {
      position: absolute;
      right: 30px;
      height: 50rpx;
      display: flex;
      align-items: center;
      bottom: 0;
      z-index: 3;
      .li {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #fff;
        margin-left: 10rpx;
      }
      .active {
        background-color: #007aff;
      }
    }
    .point-li {
      .li {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
      }
      .active {
        background: #fff;
        position: relative;
        width: 17rpx;
        height: 17rpx;
        .active1 {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 12rpx;
          height: 12rpx;
          display: block;
          background: #006be7;
        }
      }
    }
  }
  .swiper {
    height: 300rpx;
    .images-11 {
      border-radius: 30rpx;
    }
    image {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
    .desc {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(#000, 0.3);
      height: 50rpx;
      padding: 0 30rpx;
      border-bottom-right-radius: 30rpx;
      border-bottom-left-radius: 30rpx;
      text {
        display: block;
        line-height: 50rpx;
        font-size: 24rpx;
        opacity: 0.8;
        color: #fff;
      }
    }
  }

  .swiper1 {
    height: 300rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 60rpx;
    }
    .desc {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(#000, 0.6);
      height: 70rpx;
      padding: 0 30rpx;
      text {
        display: block;
        line-height: 70rpx;
        font-size: 24rpx;
        opacity: 0.8;
        color: #fff;
      }
    }
  }
</style>
